<template>
  <el-dialog :title="form.id?'编辑部门':'新增子部门'" :visible.sync="dialogFormVisible" @close="onDialogClose">
    <el-form ref="from" :model="form" :rules="rules">
      <el-form-item label="部门编码" :label-width="formLabelWidth" prop="code">
        <el-input v-model="form.code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="部门介绍" :label-width="formLabelWidth">
        <el-input v-model="form.introduce" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" :label-width="formLabelWidth" prop="manager">
        <el-select v-model="form.manager" class="manager-select">
          <el-option v-for="item in employeeList" :key="item.id" :label="item.username" :value="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item label="部门名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getEmployeeList, addDepartment, getDepartments, updataDepartment } from '@/api/departments'
// 将空数值封装成方法
function newForm() {
  return {
    code: '',
    introduce: '',
    manager: '',
    name: ''
  }
}
export default {
  data() {
    // 自定义校验方法
    // value 用户输入的内容
    // callback 控制校验是否通过
    //  callback(new Error('') 抛出错误信息
    // callback() 通过校验
    const validateCode = async(rule, value, callback) => {
      if (!value) {
        return callback(new Error('部门编码不能为空'))
      }
      // 调用接口 异步
      // 解构后重新定义名字
      const { depts: arryCode } = await getDepartments()
      // 编辑的话
      if (this.form.id) {
        const newArry = arryCode.filter(item => item.id !== this.form.id)
        if (newArry.some(item => item.code === value)) {
          return callback(new Error('部门编码不能重复'))
        }
      } else {
        if (arryCode.some(item => item.code === value)) {
          return callback(new Error('部门编码不能重复'))
        }
      }
      // 判断是否重复
      // 数组的some方法有一个或多个符合条件的返回true

      callback()
    }
    // 校验部门名称是否重复
    const validateName = async(rule, value, callback) => {
      if (!value) {
        return callback(new Error('部门名称不能为空'))
      }

      const { depts: arryName } = await getDepartments()
      if (this.form.id) {
        const newArry = arryName.filter(item => item.name !== this.form.name)
        if (newArry.some(item => item.name === value)) {
          return callback(new Error('部门名称不能重复'))
        }
      } else {
        if (arryName.some(item => item.name === value)) {
          return callback(new Error('部门名称不能重复'))
        }
      }

      callback()
    }

    return {
      dialogFormVisible: false,
      form: newForm(),
      formLabelWidth: '120px',
      rules: {
        code: [
          // 自定义校验方法validator
          { required: true, validator: validateCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择负责人', trigger: 'blur' }
        ],
        name: [
          { required: true, validator: validateName, trigger: 'blur' }
        ]
      },
      employeeList: []
    }
  },
  async created() {
    const res = await getEmployeeList()
    // console.log('员工列表', res)
    this.employeeList = res
  },
  methods: {
    show(id) {
      if (typeof id === 'string') {
        // 将点击的一级部门的id传递给到新增部门的pid
        this.form.pid = id
        // 编辑
      } else if (typeof id === 'object') {
        this.form = id
        // 页面dom中的数据渲染完之后，再执行回调函数中的方法。
        this.$nextTick(() => {
          this.$refs.from.clearValidate()
        })
      }
      this.dialogFormVisible = true
    },
    async save() {
      await this.$refs.from.validate()
      // 有id 就是编辑
      if (this.form.id) {
        await updataDepartment(this.form)
      } else {
        // 发起新增部门请求
        await addDepartment(this.form)
      }
      // 提示成功
      this.$message.success('保存成功')
      // 刷新页面
      this.$emit('reload')
      // 关闭页面
      this.dialogFormVisible = false
    },
    onDialogClose() {
      // 重置表单
      this.form = newForm()
      // 调用表单方法移除校验结果
      this.$refs.from.clearValidate()
    }
  }
}

</script>

<style lang="scss" scoped>
.manager-select{
  display: block;
}
</style>
